<template>
	<div class="content">
		<el-row >
		  <el-col :span="24"><div class="grid-content bg-purple">
		   <el-image
		        style="width: 100px; height: 100px"
		        :src="experts.headImg"
		        ></el-image>
		  </div></el-col>
		 
		</el-row>
		<el-row >
		  <el-col :span="2"><div class="grid-content bg-purple">姓名</div></el-col>
		   <el-col :span="22"><div class="grid-content bg-purple">{{experts.name}}</div></el-col>
		</el-row>
		<el-row >
		  <el-col :span="2"><div class="grid-content bg-purple">性别</div></el-col>
		   <el-col :span="22"><div class="grid-content bg-purple">{{experts.sex}}</div></el-col>
		</el-row>
	</div>
</template>

<script>
	import Table from '@/apis';
	export default{
		name:'showExpert',
		data(){
			return{
				id:this.$route.query.Id,
				experts:{}
			}
		},
		created(){
			this.getExpertById(this.id) ;
		},
		methods:{
			async getExpertById() {
				return await Table.getExpertById(1).then(res => {
					this.experts = res.data.data;
					console.log(this.experts );
					
				});
			},
		}
	}
</script>

<style>
	.content{
		width: 60%;
		margin: 30px auto;
		}
		 .el-row {
		    margin-bottom: 20px;
		    &:last-child {
		      margin-bottom: 0;
		    }
		  }
		  .el-col {
		    border-radius: 4px;
			text-align: left;
		  }
		
		  .grid-content {
		    border-radius: 4px;
		    min-height: 36px;
		  }
		  .row-bg {
		    padding: 10px 0;
		   
		  }
</style>
